---
import { COMBATS } from '@/consts/combats'
import PredictionBar from '@/components/PredictionBar.astro'
import { getBoxerById } from '@/lib/boxers'
---

<h2 class="text-dark-magenta mb-4 pb-8 pt-48 text-center text-4xl font-light">
  <div class="block sm:inline">
    <strong class="font-bold lowercase">Pronósticos de la comunidad</strong>
  </div>
</h2>

<div class="flex w-full flex-col items-center text-center">
  <div
    id="combats-container"
    class="relative mx-auto mb-12 mt-10 grid w-full max-w-2xl grid-cols-2 gap-4 p-6 md:gap-8 lg:max-w-6xl"
  >
    {
      COMBATS.toReversed().map(({ id, number, fighters, title }, index) => (
        <div
          class:list={['relative block', index === 0 ? 'col-span-2' : 'col-span-2 lg:col-span-1']}
        >
          <a href={`combates/${id}`} title={`Ir al combate ${number} de ${title}`}>
            <article
              class:list={[
                'combat group relative flex w-full',
                index === 0
                  ? 'animate-fade-in-up h-[40vh] max-h-[700px] sm:h-[50vh] lg:h-[70vh]'
                  : 'animate-fade-in-left h-[40vh] max-h-[400px] sm:h-[50vh]',
                index % 2 === 0 && index !== 0
                  ? 'animate-fade-in-left'
                  : index !== 0
                    ? 'animate-fade-in-right'
                    : '',
                'animate-delay-200 lg',
              ]}
            >
              {fighters.map((fighter, fighterIndex) => {
                const combat = COMBATS.find((c) => c.id === id)
                const isWinner = combat?.winner === fighter

                return (
                  <div
                    class:list={[
                      'absolute z-20 flex h-full flex-col items-center',
                      fighterIndex === 0 ? 'left-0' : 'right-0',
                    ]}
                  >
                    {isWinner && (
                      <div
                        class:list={[
                          'absolute top-4 z-30 rounded-lg bg-gradient-to-r from-yellow-400 to-yellow-600 px-3 py-1 shadow-lg',
                          'animate-scale-in animate-delay-500 animate-scale-subtle',
                        ]}
                      >
                        <span class="text-xs font-black tracking-wider text-black drop-shadow-sm">
                          VICTORIA
                        </span>
                      </div>
                    )}
                    <img
                      src={`/images/fighters/combat/${fighter}.webp`}
                      class:list={[
                        'mask-fade-bottom-quick h-full w-auto object-contain object-bottom transition-transform duration-300 group-hover:scale-110',
                        (fighter === 'perxitaa' || fighter === 'viruzz') &&
                          'max-sm:-translate-x-5 lg:-translate-x-5',
                        (fighter === 'gaspi' || fighter === 'tomas') &&
                          'max-sm:translate-x-5 lg:translate-x-5',
                        isWinner && 'contrast-110 winner-aura brightness-110',
                      ]}
                      alt={`Imagen de ${fighter}`}
                      transition:name={`combat-img:${fighter}`}
                    />
                  </div>
                )
              })}

              <div class="-skew-4 absolute -bottom-20 z-30 flex h-auto w-full flex-col items-center justify-center p-8 transition-transform duration-300 group-hover:scale-90">
                <img
                  src={`/images/fighters/combat/${fighters[0]}-vs-${fighters[1]}.webp`}
                  class:list={[
                    'transform-3d z-50 object-bottom',
                    index === 0
                      ? 'h-[400px] w-[700px] object-contain'
                      : 'h-80 object-cover lg:h-56',
                  ]}
                  alt={`${fighters[0]} contra ${fighters[1]}`}
                  transition:name={`vs:${fighters[0]}-${fighters[1]}`}
                />
              </div>
            </article>
          </a>
          <div class="relative mt-24 block">
            <PredictionBar
              combatId={id}
              overlay={true}
              fighter1={{
                id: getBoxerById(fighters[0])?.id || '',
                name: getBoxerById(fighters[0])?.name || '',
                percentage: 60,
              }}
              fighter2={{
                id: getBoxerById(fighters[1])?.id || '',
                name: getBoxerById(fighters[1])?.name || '',
                percentage: 40,
              }}
              totalVotes={100}
            />
          </div>
        </div>
      ))
    }
  </div>
</div>

<script>
  import { getPredictionsForPage } from '@/lib/get-predictions-for-page'

  document.addEventListener('astro:page-load', () => {
    getPredictionsForPage()
  })
</script>

<style>
  /* Aura dorada para el ganador */
  .winner-aura {
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.85))
      drop-shadow(0 0 20px rgba(245, 158, 11, 0.6)) drop-shadow(0 0 40px rgba(245, 158, 11, 0.5));
    transition: filter 300ms ease;
  }

  /* Animación scale-in sutil */
  @keyframes scale-in {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-scale-in {
    animation: scale-in 0.6s ease-out forwards;
  }

  /* Animación scale continua sutil para Victoria */
  @keyframes scale-subtle {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .animate-scale-subtle {
    animation: scale-subtle 2s ease-in-out infinite;
  }
</style>
